<template>
    <div class="banner">
        <div class="wrapper">
            <el-carousel trigger="click" height="500px">
                <el-carousel-item v-for="item in barList" :key="item.id" interval="4000">
                    <img :src="item.imgUrl" alt="">
                </el-carousel-item>
            </el-carousel>
            <div class="fl">
                <ul class="fl_list">
                    <li v-for="item in flList" :key="item.id">
                        <p class="tit" @click = "tmwl(item)"><a href="#">{{item.name}}</a></p>
                        <p class="spa" @click="clickMenu(item.id)" v-for="itemx in (item.children).slice(0,2)" :key="itemx.id"><span><a href="#">{{itemx.name}}</a></span>
                        </p>
                        <div class="ejcd">
                            <p class="fltj">分类推荐<span>根据您的购买或浏览记录推荐</span></p>
                            <ol>
                                <li v-for="items in (item.goods).slice(0,9)" :key="items.id"  @click="toDetail(items.id)">
                                    <img :src="items.picture" alt="">
                                    <div class="content">
                                        <p class="pro">{{items.name}}</p>
                                        <p class="dic">{{items.desc}}</p>
                                        <p class="price">￥{{items.price}}</p>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeBanner",
    data(){
        return {
            barList:[],
            flList:[],
        }
    },
    async created(){
        const res=await this.$http.homeApi();
        // console.log(res);
        this.barList=res.data.result.imageBanners;
        this.flList=res.data.result.categoryBanners;
    },
    methods:{
        tmwl(e) {
            this.$router.push({
                path:"/GeHr",
                query:{
                    list:e
                }
            })
        },
        clickMenu(id){
            this.$router.push({path:"/menu",query:{id}})
            console.log(id)
            
        },
        toDetail(id){
            this.$router.push({
                path:"/details",
                query:{
                    id
                }
            })
        },
    }
    // watch: {
    //     handler: async function (val, oldVal ){
    //         let data = await this.$http.menuApi({id:val.query.id});
    //         console.log(data)
    //         this.list=res.data.result
    //         console.log(res.oldVal)
    //     },
    //     deep:true,
    //     immediate:true
    // }
}
</script>

<style lang="less" scoped>
.banner{
    width:100%;
    height:500px;
    background:#f2f2f2;
    .wrapper{
        padding:0 250px;
        position:relative;
        img{
            width:100%;
            z-index:-1;
        }
        .fl{
            width:260px;
            height:100%;
            background:rgba(0,0,0,.8);
            position:absolute;
            left:250px;
            top:0;
            z-index:5;
            .fl_list{
                list-style:none;
                li{
                    display:flex;
                    color:#fff;
                    height:50px;
                    // line-height:50px;
                    margin-top:00px;
                    width:260px;
                    margin-left:-40px;
                    &:first-child{
                        margin-top:0px;
                    }
                    .tit{
                        margin-left:40px;
                        a{
                            color:#fff;
                            text-decoration: none;
                        }
                    }
                    span{
                        margin-left:10px;
                        a{
                            color:#fff;
                            text-decoration: none;
                            font-size:14px;
                        }
                    }
                    .ejcd{
                        width:calc(100vw - 760px);
                        height:100%;
                        background:rgba(255,255,255,.8);
                        position:absolute;
                        left:260px;
                        top:0;
                        z-index:5;
                        display:none;
                        .fltj{
                            color:#333;
                            font-size:18px;
                            margin-left:30px;
                            span{
                                color:#666;
                                font-size:16px;
                            }
                        }
                        ol{
                            list-style:none;
                            color:#000;
                            margin-top:-30px;
                            margin-left:-54px;
                            display:flex;
                            flex-wrap:wrap;
                            li{
                                width:calc(30% - 10px);
                                margin-left:2%;
                                margin-right:0;
                                margin-top:30px;
                                height:100px;
                                background:#fff;
                                border:1px solid #eee;
                                color:#000;
                                padding:5px;
                                img{
                                    width:100px;
                                    height:100px;
                                    z-index: 10;
                                }
                                .content{
                                    height:110px;
                                    line-height:20px;
                                    z-index: 10;
                                    margin-left:5px;
                                    margin-top:5px;
                                    .pro{
                                        margin-top:-0px;
                                        color:#333;
                                        font-size:18px;
                                    }
                                    .dic{
                                        margin-top:-10px;
                                        color:#666;
                                        height:20px;
                                        overflow:hidden;
                                    }
                                    .price{
                                        margin-top:-10px;
                                        color:#e26237;
                                        font-size:18px;
                                    }
                                }
                            }
                        }
                    }
                }
                li:hover {
                    background:#27bb9a;
                }
                li:hover > .ejcd{
                    display:block;
                }
            }
        }
    }
}
</style>